.stups-area{
    .single-sutps{
        margin: 0 12px;
         img{
            width: 100%;
         }
         position: relative;
         &::before{
            position: absolute;
            width: 100%;
            height: 40%;
            bottom: 0;
            content: "";
            @extend %gallery;
            z-index: 1;
          }
         .guest-contents{
            @include transition(.4s);
            position: absolute;
            left: 30px;
            // padding: 22px 42px;
            bottom: 25px;
            z-index: 1;
            @media #{$sm}{
                left: 20px;
            }
            @media #{$xs}{
                left: 20px;
            }
             
            h3{
                a{
                    @include transition(.4s);
                    color: #fff;
                    display: inline-block;
                    font-size: 22px;
                    font-weight: 700;
                    @media #{$lg}{
                        font-size: 18px;
                    }
                    @media #{$md}{
                        font-size: 18px;
                    }
                    @media #{$sm}{
                        font-size: 18px;
                    }
                    @media #{$xs}{
                        font-size: 22px;
                    }
                    &:hover{
                    color: #fff;
                    }
                }
            }
            p{
                margin-bottom: 10px;
                color: #fff;
                font-weight: 300;
                font-size: 14px;
                margin-bottom: 15px;
                @media #{$sm}{
                    font-size: 14px;
                }
                br{
                    @media #{$laptop}{
                        display: none;
                    }
                    @media #{$lg}{
                        display: none;
                    }
                    @media #{$md}{
                        display: none;
                    }
                    @media #{$sm}{
                        display: none;
                    }
                    @media #{$xs}{
                        display: none;
                    }
                }
            }
            .ratting{
                ul{
                    margin-bottom: 30px;
                    li{
                        display: inline-block;
                        i{
                            color: #FFCC00;
                            font-size: 14px;
                        }
                    }
                }
            }
         }
         &:hover{

         }
     }
 }

 
// Arrow
.sutps-active{
    button{
        &.slick-arrow {
            position: absolute;
            border: 0;
            padding: 0;
            z-index: 2;
            cursor: pointer;
            top: 50%;
            transform: translateY(-50%);
            left: auto;
            background: none;
            i{
                font-size: 30px;
                color: rgba(32, 69, 112,.3);
                @include transition(.2s);
                &:hover{
                    color: $theme-color;
                }
            }
        }
        &.slick-prev {
            left: -40px;
            @media #{$laptop}{
            left: -20px;
            }
            @media #{$large1}{
            left: -30px;
            }
            @media #{$lg}{
            left: -30px;
            }
            @media #{$md}{
            left: -20px;
            }
            @media #{$sm}{
            left: -10px;
            }
        }
        &.slick-next {
            right: -40px;
            @media #{$laptop}{
                right: -20px;
            }
            @media #{$large1}{
                right: -30px;
            }
            @media #{$lg}{
                right: -30px;
            }
            @media #{$md}{
                right: -20px;
            }
            @media #{$sm}{
                right: -10px;
            }
        }
    }
}
